<template>
	<div id="app">
		<div class="content">
			<div class="content-header">todos</div>
			<div class="content-list">
				<table>
					<tr>
						<td class="w40 check-all" @click="checkall">
							<i class="bottom-arrow-1"></i>
							<i class="bottom-arrow-2"></i>
						</td>
						<td class="w310"> <input id="todoinfo" type="" name="todoinfo"  placeholder="What needs to be done?"    @keyup="add($event)"  v-model="msg"> </td>
					</tr>
				</table>
				<ul class="list-ul" id="list-ul" v-if="items.length!=0">
					<!-- <template v-for="(item , index) in items" >
						<li v-if="item.isshow" >
							<table> 
								<tr>
									<td class="circle " :class="{'circle-check':item.ischecked}" @click="upstatus(index)"><span > <i>√</i>  </span></td>
									<td class="list-li-cont " :class="{'cont-checked':item.ischecked}" @mouseover="enter(index)" @mouseout="leave(index)">
										<span >
											{{item.content}}
										</span>
									</td>
									<td class="list-li-cont-i" :class="{'list-i-check':item.isdel}"  @mouseover="enter(index)" @mouseout="leave(index)" @click="del(index)" > <i >×</i>  </td>
								</tr>
							</table>
						</li>
					</template> -->
          <content-li :items="items" ></content-li>
          <myfooter :type="list_type" :itemfalse="itemfalse" v-on:listenchild="updatetype" v-on:clearcheck="clear"></myfooter>
					<!-- <li class="list-footer">
						<span class="sp1"> {{itemfalse}} items left </span>
						<span class="sp2">   
							<span id="all" class="sp-myall" @click="updatetype(1)" :class="{'sp2-checked':list_type==1}" > All </span>
							<span id="active" @click="updatetype(2)" :class="{'sp2-checked':list_type==2}"> Active </span>
							<span id="completed" @click="updatetype(3)" :class="{'sp2-checked':list_type==3}"> Completed </span>
						</span>
						<span class="sp3" @click="clear"> Clear completed</span>
					</li>  -->
				</ul>
			</div>
      
			<!-- <div class="content-footer">
				<p> Double-click to edit a todo </p>
			</div> -->
      <divfooter></divfooter>
		</div>
	
	</div>
</template>

<script>
import store from './data/Storage.js';
import contentLi from './mycontent';
import myfooter from './myfooter';
import divfooter from './divfooter';

export default {
  name: 'app',
  data: function () {
    return {
      iscontent: true,
      items: store.fetch(),
      msg: '',
      itemfalse: store.fetch_length(),
      list_type: 1
    }
  },
  components:{contentLi,myfooter,divfooter},
  methods: {
    add (ev) {
      if (ev.keyCode == 13 && this.msg != '' && this.msg != undefined) {
        this.items.push({
          content: this.msg,
          ischecked: false,
          isdel: false,
          isshow: true
        })
        console.log(this.items)
        this.msg = ''
      }
    },
    // upstatus (index) {
    //   this.items[index].ischecked = !this.items[index].ischecked
    //   let val = this.items[index]
    //   this.items.splice(index, 1, val)
    // },
    // enter (index) {
    //   this.items[index].isdel = true
    // },
    // leave (index) {
    //   this.items[index].isdel = false
    // },
    // del (index) {
    //   this.items.splice(index, 1)
    //   console.log('1212', this.items)
    // },
    updatetype (type) {
      this.list_type = type
      console.log(this.list_type)
    },
    updateshow (item) {
      let list_type = this.list_type
      if (list_type == 1) {
        item.isshow = true
      } else if (list_type == 2 && item.ischecked == false) {
        item.isshow = true
      } else if (list_type == 3 && item.ischecked == true) {
        item.isshow = true
      } else {
        item.isshow = false
      }
    },
    clear () {
      let items_tmp = new Array()
      for (let i = 0; i < this.items.length; i++) {
        if (!this.items[i].ischecked) {
          items_tmp.push(this.items[i])
        }
      }
      this.items = items_tmp;
    },
    checkall () {
      let status = true
      if (this.itemfalse == 0) status = false;
      for (let i = 0; i < this.items.length; i++) {
        this.items[i].ischecked = status;
      }
      this.items[0].ischecked = status;
      let val = this.items[0];
      this.items.splice(0, 1, val);
    }
  },
  watch: {
    items: function (val, oldval) {
      this.itemfalse = 0
      for (let x = 0; x < val.length; x++) {
        if (!val[x].ischecked) {
          this.itemfalse++
        }
        this.updateshow(this.items[x]);
      }
      store.save(this.items);
      store.save_length(this.itemfalse);
      console.log('123')
    },
    list_type: function (val, oldval) {
      for (let x = 0; x < this.items.length; x++) {
        this.updateshow(this.items[x])
      }
      console.log('show', this.items)
    }
  }
}
</script>

<style>

</style>
